<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>两种方式实现圣杯布局</title>
	<style>
		/* .container {
			    margin-left: 120px;
			    margin-right: 220px;
			}
			.main {
			    float: left;
			    width: 100%;
			    height:300px;
			    background: green;
			}
			.left {
			    position: relative;
			    left: -120px;
			    float: left;
			    height: 300px;
			    width: 100px;
			    margin-left: -100%;
			    background: red;
			}
			.right {
			    position: relative;
			    right: -220px;
			    float: right;
			    height: 300px;
			    width: 200px;
			    margin-left: -200px;
			    background: blue;
			} */

		.HolyGrail {
			display: flex;
			min-height: 100vh;
			flex-direction: column;
		}

		header,
		footer {
			background-color: blue;
			flex: 1;
		}

		.HolyGrail-body {
			display: flex;
			flex: 1;
		}

		.HolyGrail-content {
			background-color: chartreuse;
			flex: 1;
		}

		.HolyGrail-nav,
		.HolyGrail-ads {
			background-color: cyan;
			/* 两个边栏的宽度设为12em */
			flex: 0 0 12em;
		}

		.HolyGrail-nav {
			/* 导航放到最左边 */
			order: -1;
		}
		
		/* 如果是小屏幕，躯干的三栏自动变为垂直叠加。 */
		@media (max-width: 768px) {
			.HolyGrail-body {
				flex-direction: column;
				flex: 1;
			}

			.HolyGrail-nav,
			.HolyGrail-ads,
			.HolyGrail-content {
				flex: auto;
			}
		}
	</style>
</head>

<body class="HolyGrail">
	<header></header>
	<div class="HolyGrail-body">
		<main class="HolyGrail-content"></main>
		<nav class="HolyGrail-nav"></nav>
		<aside class="HolyGrail-ads"></aside>
	</div>
	<footer></footer>
</body>


<!-- <body>
	<div class="container">
		<div class="main"></div>
		<div class="left"></div>
		<div class="right"></div>
	</div>

</body> -->

</html>